<template>
  <div>
    <el-table v-loading="loading" :data="tableData" :header-row-class-name="setHeaderStyle" border
              :cell-class-name="tableCellClassName" :header-cell-class-name="tableHeaderCellClassName"
              @selection-change="handleSelectionChange" :row-key="rowKey" :tree-props="treeProps">
      <template v-for="(item,index) in columnData">
        <slot v-if="item.slot" :name='item.slot'></slot>
        <el-table-column :type="item.type" v-else :prop="item.prop" align="center" :label="item.label"
                         :width="item.width"
                         :key="index"></el-table-column>
      </template>
    </el-table>
    <el-pagination
        v-if="isPagination"
        small
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableTotal"
        :page-sizes="[1, 5, 10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'x-table',
  props: {
    treeProps: {
      type: Object,
      default: function () {
        return {
          hasChildren: 'hasChildren',
          children: 'children'
        }
      }
    },
    headerCellClass: {
      type: Array,
      default: () => []
    },
    cellClass: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array
    },
    columnData: {
      type: Array
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    tableTotal: {
      type: Number,
      default: 0
    },
    isPagination: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: null
    }
  },
  data () {
    return {}
  },
  mounted () {

  },
  methods: {
    tableHeaderCellClassName ({ column }) {
      const headerCellClass = this.headerCellClass.find(e => e.prop === column.property)
      return headerCellClass ? headerCellClass.className : ''
    },
    tableCellClassName ({ column }) {
      const cellClass = this.cellClass.find(e => e.prop === column.property)
      return cellClass ? cellClass.className : ''
    },
    setHeaderStyle () {
      return 'table-header'
    },
    handleCurrentChange (currentPage) {
      this.$emit('currentPage', currentPage)
    },
    handleSizeChange (pageSize) {
      this.$emit('pageSize', pageSize)
    },
    handleSelectionChange (selectionVal) {
      this.$emit('selectionChange', selectionVal)
    }
  }
}
</script>

<style scoped lang="scss">
.el-table {
  ::v-deep .table-header {
    th {
      background: #f8f8f8 !important;
      color: #222222;
    }
  }
}

.el-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

</style>
